<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文件API测试</title>

    <style>
        .drop{
            height: 200px;
            background-color: burlywood;
        }
    </style>

</head>

<body>
    <div id="dropDiv" class="drop">

    </div>

</body>

</html>

<script>

    dropDiv.addEventListener("dragenter", dragenter, false);
    dropDiv.addEventListener("dragover", dragover, false);
    dropDiv.addEventListener("drop", drop, false);
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    function drop(e) {
        console.log(e)
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;

        read(files[0]);
    }

    var objFile = new File(["First Line Text","Second Line Text"], "test.txt");

    console.log(objFile)

    // download(objFile, "测试文件.txt")
    read(objFile)

    function download(blob, fileName){

        const a = document.createElement('a');
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    }

    function read(file){
        var fr = new FileReader();
        fr.onloadend = function(e) {
            console.log(e.target.result)
        };
        fr.readAsText(file);
    }

</script>